//总易积分里  可使用的 表格
import React, {Component} from "react";
import {
  View,
  Text,
  StyleSheet,
  ListView,
  ScrollView,
} from 'react-native';
import {observer} from "mobx-react/native";
import ContentAlign from "../../page/mywallet/ContentAlign";
import ThreeBtn from "../../page/mywallet/ThreeBtn";
import User from "../../models/User";

var titleArray = ['姓名', '收入支出渠道', '数量', '时间'];
var DataArray = [
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
  {姓名:'刘静静', 收入支出渠道:'邀请好友赠送', 数量:'6.0', 时间:'2017-09-23'},
];

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    height:'26%',
    backgroundColor: '#e4393c',
  },
  data: {
    flexDirection: 'row',
  },
  font: {
    fontSize: 13,
    color: '#a9a9a9',
    margin: 12,
  },
  tableHead: {
    flexDirection: 'row',
    // alignItems: 'center',      // 水平局中
    // justifyContent: 'center',  // 垂直居中
    marginTop: '3%',
  },
  contain: {
    margin: 8,
    fontSize: 16,
  }
})

class TableHead extends React.Component{
  render(){
    return (
      <View style={styles.tableHead}>
        <View >
          <Text style={styles.contain}> 姓名 </Text>
        </View>
        <View>
          <Text style={styles.contain}> 收入支出渠道 </Text>
        </View>
        <View>
          <Text style={styles.contain}> 数量 </Text>
        </View>
        <View>
          <Text style={styles.contain}> 时间 </Text>
        </View>
      </View>
    );
  }
}

@observer
export default class BeUseable extends React.Component{
  static navigationOptions = {
    title: '钱包',
  }
	constructor(props){
    super(props);
     var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     this.state= {
      TitleData: ds.cloneWithRows(titleArray),
      DataSource: ds.cloneWithRows(DataArray),
      loaded: false,
     };
  }

  componentDidMount(){
    this.setState({ loaded: true});
  }

  _renderTitle(rowData: object, sectionID: number, rowID: number){
    return (
      <View style={styles.data}>
        <Text style={styles.contain}> {rowData} </Text>
      </View>
    );
  }

  _renderRow(rowData: object, sectionID: number, rowID: number){
    return (
      <View style={styles.data}>
        <View >
          <Text style={styles.font}> {rowData.姓名} </Text>
        </View>
        <View>
          <Text style={styles.font}> {rowData.收入支出渠道} </Text>
        </View>
        <View>
          <Text style={styles.font}> {rowData.数量} </Text>
        </View>
        <View>
          <Text style={styles.font}> {rowData.时间} </Text>
        </View>
      </View>
    );
  }
  renderTable() {
    const assetList = User.assetList;
    const asset = assetList.tableTitle.map(tab => 
      <View key={tab}>
        <Text style={styles.contain}>{tab}</Text>
      </View>
    )
    return asset;
  }
  renderHTML() {
    const assetList = User.assetList;
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     const data = {
      TitleData: ds.cloneWithRows(assetList.tableTitle),
      DataSource: ds.cloneWithRows(assetList.tableBody),
      loaded: false,
     };
    return (
      <View>
        <Text>{assetList.title}</Text>
        <View style={styles.tableHead}>
          {this.renderTable()}
        </View>
        <ListView style={{marginTop: '3%'}}
          dataSource={data.DataSource} 
          renderRow={this._renderRow}
        />
      </View>
    )
  }
	render(){
		return (
      <View>
          <Text>可使用收支明细：</Text>
          
          <TableHead />
        
          <ListView style={{marginTop: '3%'}}
            dataSource={this.state.DataSource} 
            renderRow={this._renderRow}/>
            {this.renderHTML()}
      </View>
		);
	}
}
